<template>
  <div class="comWidth">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="详情描述" prop="description">
        <el-input v-model="form.description" :placeholder="form.desPlace"></el-input>
      </el-form-item>
      <el-form-item label="文件名称">
        <FileEdit v-for="(file,index) in files" :file="file" :files="files" :index="index" :deleteItem="deleteItem" :key="index"></FileEdit>
        <AddFilename :files="files"></AddFilename>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="editGist">更新内容</el-button>
        <el-button size="medium" class="returnGist">
          <router-link to="/read">返回</router-link>
        </el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  import http from "axios"
  import AddFilename from "@/components/AddFilename"
  import File from "@/components/File"
  import FileEdit from "@/components/FileEdit"

  export default {
    name: "Edit",
    components: {AddFilename,File,FileEdit},
    data() {
      return {
        form:{
          description: ""
        },
        ps: [
          "true", "false"
        ],
        selectId: this.$route.query.id,
        files: [],
        oldName: [],
        deleteItem: []
      }
    },
    mounted() {
      http.get("https://api.github.com/gists/" + this.selectId, {
        headers: {
          "Authorization": "token " + localStorage.getItem("token")
        }
      })
        .then((r) => {
          this.form.description = r.data.description;
          this.files = Object.values(r.data.files);
          this.files.forEach(function (item) {
            item["oldname"] = item.filename;
          });
          console.log(this.files);
        })
        .catch();
    },
    methods: {
      editGist() {
        var data = {};
        data.description = this.form.description;
        data.files = {};
        this.files.forEach(function (item) {
          if (item.oldname !== undefined) {
            if (item.oldname !== item.filename) {
              //更新文件名
              data.files[item.oldname] = {
                filename: item.filename,
                content: item.content
              };
            } else {
              //更新内容
              data.files[item.oldname] = {
                content: item.content
              };
            }
          } else {
            //新增文件
            data.files[item.filename] = {
              content: item.content
            }
          }

        });
        //删除文件
        var _self = this;
        _self.deleteItem.forEach(function (item) {
          if (_self.files.find(val => val.filename === item) === undefined) {
            data.files[item] = null;
          }
        });

        http.patch("https://api.github.com/gists/" + this.selectId, data, {
          headers: {
            "Authorization": "token " + localStorage.getItem("token")
          }
        })
          .then((r) => {
            console.log(r);
            window.confirm("更新成功");
          })
          .catch((e) => {
            console.log(e);
          });
      }
    }

  }
</script>

<style scoped>
  .comWidth{
    width:500px;
    -ms-text-align-last: left;
    text-align-last: left;
  }
</style>
